<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        #canvas{
            background: linear-gradient(135deg,#9d50bb,#6e48aa);
            border-radius: 50%;
            box-shadow: 2px 2px 8px #9d50bb,-2px -2px 8px #9d50bb;
        }
        body{
            margin: 0px;
            padding: 0px;
            height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        function drawClock(){
            ctx.clearRect(0,0,500,500); //清除画布
            let date = new Date();
            
            const gnt = ctx.createLinearGradient(0,0,250,0);
            gnt.addColorStop(0,'#f54ea2');
            gnt.addColorStop(1,'#ff7676');
            ctx.beginPath();
            ctx.lineWidth = 5;
            // ctx.strokeStyle = gnt;
            ctx.strokeStyle = '#6e48aa'
            ctx.arc(250,250,200,0,360,false);
            ctx.stroke();
            ctx.closePath();
            
            for (let index = 0; index < 12; index++) {
                ctx.save();
                ctx.lineWidth = 7;
                ctx.strokeStyle = "#fff";//线颜色
                ctx.translate(250,250);//设置旋转中心
                ctx.rotate(30*index*Math.PI/180);//旋转角度
                ctx.beginPath();//开始绘制
                ctx.moveTo(0,-170);//开始点
                ctx.lineTo(0,-190);//从开始点连线

                ctx.font = '18px 微软雅黑'
                ctx.fillStyle = '#fff';
                ctx.textBaseLine = 'top';
                ctx.fillText(index==0?'12':index.toString(),-10,-210)
                ctx.stroke();//绘制
                ctx.closePath();//结束绘制
                ctx.restore();//将旋转后的元素放回原画布
            }
            //绘制分针刻度
            for (let index = 0; index < 60; index++) {
                ctx.save();
                ctx.lineWidth = 5;
                ctx.strokeStyle ="#fff";
                ctx.translate(250,250);
                ctx.rotate(6*index*Math.PI/180);
                ctx.beginPath();//开始绘制
                ctx.moveTo(0,-180);//开始点
                ctx.lineTo(0,-190);//从开始点连线
                ctx.stroke();//绘制
                ctx.closePath();//结束绘制
                ctx.restore();//将旋转后的元素放回原画布
            }

            //绘制时针
            let hours = date.getHours();
            let minutes = date.getMinutes();
            hours = hours>12?hours-12:hours;
            let smalls= 0;
            if(minutes>0)
            {
                smalls = minutes/2 + (minutes%30>0?1:0);
            }
            ctx.save();
            ctx.lineWidth = 7
            ctx.lineCap = 'round'
            ctx.strokeStyle = '#fff'
            ctx.translate(250,250);
            ctx.rotate((30*hours+smalls)*Math.PI/180);
            ctx.beginPath()
            ctx.moveTo(0,0);
            ctx.lineTo(0,-90);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            //绘制分针
            
            ctx.save();
            ctx.lineWidth = 5
            ctx.lineCap = 'round'
            ctx.strokeStyle = '#f2f2f2'
            ctx.translate(250,250);
            ctx.rotate(6*minutes*Math.PI/180);
            ctx.beginPath()
            ctx.moveTo(0,0);
            ctx.lineTo(0,-120);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            //绘制秒针
            let seconds = date.getSeconds();
            ctx.save();
            ctx.lineWidth = 4
            ctx.lineCap = 'round'
            ctx.strokeStyle = '#ccc'
            ctx.translate(250,250);
            ctx.rotate(6*seconds*Math.PI/180);
            ctx.beginPath()
            ctx.moveTo(0,0);
            ctx.lineTo(0,-150);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = '#fff'
            ctx.arc(250,250,10,0,360,false);
            ctx.fill();
            ctx.closePath();
        }
        drawClock();//因为下面要等一秒才画
        setInterval(drawClock,1000)
    </script>
</body>
</html>